<template>
  <div id="detail">
      <detail-nav-bar class="nav" ref="nav"  @titIndex="titIndex"></detail-nav-bar>
      <scroll class="content" ref="scroll"  :probe-type="3"  @scroll-hd="Detailscroll" :pull-up-load="true"
       >
        <detail-swiper :top-images="topImages"/>
        <detail-base-info :goods="goods"/>
        <detail-info :shop="shop"/>
        <deatil-comment-info :detail-info="detailInfo" @imageLoad="detailLoad"/>
        <deatil-param ref="param"  :param="goodsParam"/>
        <detail-comment ref="comment" :comment="comentInfo"/>
        <goods-list ref="goodsList" :goods="recommends"></goods-list>
      </scroll>
      <detail-bottom-nav @cart="cart"></detail-bottom-nav>
      <back-top @click.native="backTop" v-show="show"/>
      <!-- <toast :message="message" :is-show="show"/> -->
  </div>
</template>

<script>
//子组件
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailInfo from './childComps/DetailInfo'
import DeatilCommentInfo from './childComps/DeatilCommentInfo.vue'
import DeatilParam from './childComps/DeatilParam'
import DetailComment from './childComps/DetailComment'
import DetailBottomNav from './childComps/DetailBottomNav'
//公共组件
import Scroll from  'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'
import BackTop from 'components/content/backTop/BackTop'
// import Toast from 'components/common/toast/Toast'
//方法
import { getDetail ,Goods, Shop,Goodsparam,getRecommend } from 'network/detail' 
import { itemListenerMixin,backTop } from 'common/mixin.js'
export default {
  name: 'Detail',
  components: { 
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailInfo,
    DeatilCommentInfo,
    DetailComment,
    DeatilParam,
    DetailBottomNav,
    Scroll,
    GoodsList,
    BackTop,
    // Toast
  },
  directives: {  },
  data() {
    return {
       iid:null,
       topImages:[],
       goods:{},
       shop:{},
       detailInfo:{},
       goodsParam:{},
       comentInfo:{},
       recommends:[],
       themeTopYs:[],
       getThemeTop:null,
       height:0,
       currentIndex:0,
      //  message:'哈哈~',
      //  show:false
    };
  },
  created() {
    //this.iid=this.$route.params.iid
    //this.iid=this.$route.query.iid
    this.getDetailData()
     //获取推荐
    getRecommend().then(res=>{
      this.recommends=res.data.list
      console.log(this.recommends)
    })
    this.getThemeTop=this.debounce(()=>{
      
      this.themeTopYs=[]
      this.themeTopYs.push(0)
      this.themeTopYs.push(this.$refs.param.$el.offsetTop)
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
      this.themeTopYs.push(this.$refs.goodsList.$el.offsetTop)
      // this.themeTopYs.push(Number.MAX_VALUE)
      console.log(this.themeTopYs)
    },100)
  },
  mixins: [itemListenerMixin,backTop],
  mounted() {
    // const result = this.debounce(this.$refs.scroll.scroll.refresh())
    // this.DetailItemListener=()=>{
    //        result()
    //  }
    //  this.$bus.$on('imageLoad',this.DetailItemListener) 
    this.$nextTick(()=>{ // 页面渲染完成后的回调
        this.height=this.$refs.nav.$el.offsetHeight
        console.log(this.height)
    })
  },
  updated() {
    // this.themeTopYs=[]
    // this.themeTopYs.push(0)
    // this.themeTopYs.push(this.$refs.param.$el.offsetTop)
    // this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
    // this.themeTopYs.push(this.$refs.goodsList.$el.offsetTop)
    // console.log(this.themeTopYs)
    //this.getThemeTop()
    // this.getThemeTop=this.debounce(()=>{
      
    //   this.themeTopYs=[]
    //   this.themeTopYs.push(0)
    //   this.themeTopYs.push(this.$refs.param.$el.offsetTop)
    //   this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
    //   this.themeTopYs.push(this.$refs.goodsList.$el.offsetTop)
    //   console.log(this.themeTopYs)
    // })

  },
  deactivated() {
     //取消全局事件的监听   路由缓存排除了Detail 所以不会打印出来
     console.log('deactivated')
    //this.$bus.$off('imageLoad',this.DetailItemListener)
  },
  destroyed() {
    //取消事件的监听
    this.$bus.$off('imageLoad',this.DetailItemListener)
  },
  methods: {
    detailLoad(){
        this.$refs.scroll.scroll.refresh()
        this.getThemeTop()
    },
    //加入购物车
    cart(){
      //加入购物车时的一些信息
      const product={}
      product.image=this.topImages[0]
      product.title=this.goods.title;
      product.desc=this.goods.desc;
      product.realPrice=this.goods.realPrice;
      product.iid=this.iid;
      //将商品添加到购物车并提示添加购物车成功~
      this.$store.dispatch('addCart',product).then(res=>{
          this.$toast(res)
      })
    },
    getDetailData(){
       this.iid=this.$route.query.iid
        getDetail(this.iid).then(res=>{
            //获取顶部轮播数据
            console.log(res)
            const data=res.result
            this.topImages=data.itemInfo.topImages

             //获取商品信息
             this.goods=new Goods(data.itemInfo, data.columns, data.shopInfo.services)
             //console.log(this.goods)
             //店铺信息
             this.shop=new  Shop(data.shopInfo)
             //console.log(this.shop)
             //商品的详情数据
             this.detailInfo=data.detailInfo
             //console.log(this.detailInfo)
             //商品参数
             this. goodsParam=new Goodsparam(data.itemParams.info,data.itemParams.rule)
             //获取商品评论
            if(data.rate.cRate!=0){
                this.comentInfo=data.rate.list[0]
             }
             console.log(this.comentInfo)

            this.$nextTick(()=>{
              console.log('~~~')
            })
        })
    },
    titIndex(idx){
        //console.log(idx)
        this.$refs.scroll.scrollTop(0,-this.themeTopYs[idx],500)
    },
    Detailscroll(position){
       if(Math.abs(position.y)>1000){
          this.show=true
        }else{
          this.show=false
        }
      //方法一
      const positionY=-position.y;
      let length=this.themeTopYs.length;
      for(let i=0;i<length;i++){
         if( (this.currentIndex!==i) && (i<length-1 && positionY >=this.themeTopYs[i] && positionY <this.themeTopYs[i+1] || (i===length-1 && positionY >= this.themeTopYs[i]))){
               this.currentIndex=i
               console.log(this.currentIndex)
               this.$refs.nav.curIndex=this.currentIndex
         }
      }
      //方法二
      // if(positionY>=this.themeTopYs[0] && positionY<this.themeTopYs[1]){
      //    this.$refs.nav.curIndex=0
      // }else if(positionY>=this.themeTopYs[1] && positionY<this.themeTopYs[2]){
      //    this.$refs.nav.curIndex=1
      // }else if(positionY>=this.themeTopYs[2] && positionY<this.themeTopYs[3]){
      //   this.$refs.nav.curIndex=2
      // }else if(positionY>=this.themeTopYs[3]){
      //   this.$refs.nav.curIndex=3
      // }
    }
    //  //防抖
    //  debounce(func,delay){
    //       let timer=null
    //       return function(...args){
    //          if(timer) clearTimeout(timer)
    //          timer=setTimeout(()=>{
    //             func.apply(this,args)
    //          },delay)
    //       }
    //  }
  },
};
</script>

<style  scoped>
#detail{
  position: relative;
  z-index: 99;
  background: #ffff; 
  height:100vh;
  /*overflow-y: hidden;*/
}
.nav{
  background: #fff;
  text-align: center;
  color: #000;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
.content{
  /* 还可以使用定位来确定内容的高度~ */
  /*margin-top:44px;
  height:calc(100% - 44px);*/
  position: absolute;
  left:0;
  right: 0;
  bottom:50px;
  top:44px;
  overflow: hidden;
}
</style>